选择和操作 DOM 元素

概述

在现代 Web 开发中，JavaScript 是操作网页内容的核心工具。通过操作 DOM（文档对象模型），我们可以动态地改变网页的内容、结构和样式。本教程将详细介绍如何使用 JavaScript 选择和操作 DOM 元素。

什么是 DOM？

DOM 是 HTML 文档的编程接口。它将 HTML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性或文本）。通过 JavaScript，我们可以访问和修改这些节点，从而实现动态网页效果。

选择 DOM 元素

在操作 DOM 元素之前，我们首先需要选择它们。JavaScript 提供了多种方法来选择 DOM 元素。

1. getElementById

通过元素的 id 属性选择元素。

// HTML
<div id="myDiv">Hello, World!</div>

// JavaScript
const myDiv = document.getElementById('myDiv');
console.log(myDiv.textContent); // 输出: Hello, World!

2. getElementsByClassName

通过元素的 class 属性选择元素。返回一个 HTMLCollection。

// HTML
<div class="myClass">Element 1</div>
<div class="myClass">Element 2</div>

// JavaScript
const elements = document.getElementsByClassName('myClass');
console.log(elements[0].textContent); // 输出: Element 1
console.log(elements[1].textContent); // 输出: Element 2

3. getElementsByTagName

通过标签名选择元素。返回一个 HTMLCollection。

// HTML
<p>Paragraph 1</p>
<p>Paragraph 2</p>

// JavaScript
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs[0].textContent); // 输出: Paragraph 1
console.log(paragraphs[1].textContent); // 输出: Paragraph 2

4. querySelector

使用 CSS 选择器选择第一个匹配的元素。

// HTML
<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

// JavaScript
const firstParagraph = document.querySelector('.container p');
console.log(firstParagraph.textContent); // 输出: Paragraph 1

5. querySelectorAll

使用 CSS 选择器选择所有匹配的元素。返回一个 NodeList。

// HTML
<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

// JavaScript
const allParagraphs = document.querySelectorAll('.container p');
allParagraphs.forEach(paragraph => {
  console.log(paragraph.textContent);
});
// 输出:
// Paragraph 1
// Paragraph 2

操作 DOM 元素

一旦选择了 DOM 元素，我们就可以对其进行各种操作，如修改内容、样式、属性等。

1. 修改元素内容

使用 textContent 或 innerHTML 属性修改元素的文本内容。

// HTML
<div id="myDiv">Hello, World!</div>

// JavaScript
const myDiv = document.getElementById('myDiv');
myDiv.textContent = 'Hello, JavaScript!';
console.log(myDiv.textContent); // 输出: Hello, JavaScript!

2. 修改元素样式

使用 style 属性修改元素的 CSS 样式。

// HTML
<div id="myDiv">Hello, World!</div>

// JavaScript
const myDiv = document.getElementById('myDiv');
myDiv.style.color = 'red';
myDiv.style.backgroundColor = 'yellow';

3. 修改元素属性

使用 setAttribute 方法修改元素的属性。

// HTML
<a id="myLink" href="#">Click me</a>

// JavaScript
const myLink = document.getElementById('myLink');
myLink.setAttribute('href', 'https://www.example.com');

4. 添加和删除元素

使用 createElement、appendChild、removeChild 等方法动态添加和删除元素。

// HTML
<div id="container"></div>

// JavaScript
const container = document.getElementById('container');
const newParagraph = document.createElement('p');
newParagraph.textContent = 'New Paragraph';
container.appendChild(newParagraph);

// 删除元素
container.removeChild(newParagraph);

实践练习

练习 1: 修改元素内容

1. 创建一个 HTML 文件，包含一个 div 元素，其 id 为 myDiv，内容为 Hello, World!。
2. 使用 JavaScript 将 div 元素的内容修改为 Hello, JavaScript!。

练习 2: 修改元素样式

1. 创建一个 HTML 文件，包含一个 div 元素，其 id 为 myDiv，内容为 Hello, World!。
2. 使用 JavaScript 将 div 元素的文本颜色修改为红色，背景颜色修改为黄色。

练习 3: 动态添加和删除元素

1. 创建一个 HTML 文件，包含一个 div 元素，其 id 为 container。
2. 使用 JavaScript 动态创建一个 p 元素，内容为 New Paragraph，并将其添加到 container 中。
3. 使用 JavaScript 删除刚刚添加的 p 元素。

总结

通过本教程，我们学习了如何使用 JavaScript 选择和操作 DOM 元素。掌握了这些基本技能后，你将能够创建动态和交互式的网页。继续练习和探索，你将能够更深入地理解 DOM 操作，并将其应用于更复杂的项目中。